<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Tag Histo</title>
		<link rel="stylesheet" href="css/taghisto.css" />
		<meta name="Description" CONTENT="Explorateur historique de tag pour le jardin des connaissances"/>
		<meta name="Keywords" CONTENT="tagcloud filtre historique jardin connaissances"/>
		<meta name="Author" CONTENT="Samuel Szoniecky"/>
		<script type='text/javascript' src='js/d3.v3.js' ></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.smart_autocomplete.js"></script>
	<head>
	<body>

    <div id="title">
      <h1>Exploration historique des Tags</h1>
    </div>
    <div id="content">
      <div id="left_side">
        <form id="search">
          <input src="img/search.png" type="image">
          <input autocomplete="off" type="text" style="width: 457px;">
          <a class="clear" href="#" style="display: none">
            <img src="img/clear.png">
          </a>
        </form>
        <div id="tags_list_container" style="height: 403px;width:580px"><ul></ul></div>
      </div>
      <div id="right_side" style="width: 1076px;">
        <div id="bottom" style="width: 938px;">
			<svg width="1117" height="419" id="svgGraph">
	          <defs>
	            <clipPath id="graphs_clip_path">
	              <rect x="75" y="0" width="932" height="419"></rect>
	            </clipPath>
	          </defs>
	          <rect id="playground_bg" x="75" y="50" width="932" height="289"></rect>
	          <g class="axis" id="x_axis" ></g>
	          <g class="axis" id="y_axis" ></g>
	          <g id="tags">
	            <g id="lines"></g>
	            <g id="circles"></g>
	            <g id="labels"></g>
	          </g>
	          <g id="popup" opacity="0" transform="translate(687 70)"><rect class="bg" width="300" height="150"></rect><text class="year" x="10" y="27">1955</text></g>
	          <g id="year_zoomers"></g>
	        </svg>
	      <div class="share_link">
            Partagez ces résultats avec ce lien :
            <br>
            <input id="share_result" type="text">
          </div>
          <div class="links">
            <div class="social">
          </div>
          <div class="spacer"></div>
          <div class="explanations">
	          merci beaucoup à <a href="http://dataaddict.fr/prenoms/" target="_blank">dataaddict.fr</a>
          </div>
        </div>
      </div>
    </div>
    		<script>
		    var fill = d3.scale.category20b(),
			idBase = '<?php echo $this->idBase; ?>',
			w = 800,
			h= 800,
			minMax = 50,
			max = minMax,
			scale = 1,
			complete = 0,
			statusText = d3.select("#status"),
			fontSize,
			ext,
			minmaxFont = [8, 78],
			dataTag, max_tag;
			var years, _i, _results;
		    var duration = 1000;
			//setInput();

			var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
	       	var axis, x_axis, y_axis;
			var line_generator, redraw_existing_labels, redraw_existing_lines, transform_for_tag_label, update_lines, update_y_axis, year_zoomers;
			
			var svg = d3.select("#svgGraph");
			var background = svg.append("g"),
				vis = svg.append("g")
					.attr("transform", "translate(" + [w >> 1, h >> 1] + ")"); 

	       var colors = ["#4c5d91", "#4c92b9", "#53a488", "#a5ad5c", "#e0da2f", "#b98c6f", "#d57599", "#a15599"];
		   var tag_color_scale = d3.scale.ordinal().range(colors.slice(0, 5));
		   var tags_lis;
	       var tags_selection = (function() {
	          var tags;
	          tags = [];
	          tags.add = function(tag) {
	            return tags.push(tag);
	          };
	          tags.remove = function(tag) {
	            var i;
	            i = tags.indexOf(tag);
	            return tags.splice(i, 1);
	          };
	          return tags;
	        })();
			
			d3.json("<?php echo $this->urlStats; ?>", function(data) {
				years = data.dateDocInt
				dataTag = data.tagHisto;
				max_tag = data.maxTagNb;
				//ext = d3.extent(self.data.map(function(x) { return parseInt(x.value); }));
				fontSize = d3.scale.log().domain([1,max_tag]).range(minmaxFont);
				
				//var tcGlobal = new tagcloud({idDoc:"gTC", data:dataTag, w:300, h:300, global:true});

				axis = (function() {
			              var full_range;
			              //full_range = d3.extent(years);
			              full_range = d3.extent(years.map(function(x) { return parseInt(x.temps); }));
			              return {
			                x: d3.scale.linear().domain(full_range),
			                y: d3.scale.linear().domain([0, minMax])
			              };
			            })();
				
		      	tags_lis = d3.select("#tags_list_container ul").selectAll("li")
		      		.data(dataTag)
		      		.enter().append("li")
		      		.call(update_class_for_tag(years))
				    .text(function(d) {
				          return d.code;
				        })
		        	.on("click", function(d) {			        	
				          console.log(d.code);
				          var selected;
				          selected = d3.select(this).classed("selected");
				          add_remove((selected ? "remove" : "add"), d);
				          return false;
				        });							    
		        $("#tags_list_container ul li").after(" ");

		        
				x_axis = d3.svg.axis().scale(axis.x).orient("bottom").tickValues((function() {
	                var _i, _len, _ref, _results;
	                _ref = years;
	                _results = [];
	                for (_i = 0, _len = _ref.length; _i < _len; _i++) {
	                  year = parseInt(_ref[_i].temps);
	                  if (year % 5 === 0) {
	                    _results.push(year);
	                  }
	                }
	                return _results;
	              })()).tickFormat(String).tickSubdivide(1).tickSize(6, 1);

		    	y_axis = d3.svg.axis().scale(axis.y).orient("left").tickFormat(String).ticks(6);

		    	line_generator = d3.svg.line().x(function(pt, i) {
	                return axis.x(parseInt(years[i].temps));
	              }).y(axis.y).tension(0.1).interpolate("linear");

				wResize([1000,400]);
		    	
			});//fin chargement du json


			function wResize(arg) {
	          var height, margin, playground_width, w, width, year_zoomers;
	          width = arg[0], height = arg[1];
	          axis.x.range([75, width - 110]);
	          axis.y.range([height - 80, 50]);
	          y_axis.tickSize(-(axis.x.range()[1] - axis.x.range()[0]), 0, 1);
	          x_axis.tickSize(-(axis.y.range()[0] - axis.y.range()[1]), 0, 1);
	          svg.select("#x_axis").attr("transform", "translate(0, " + (axis.y.range()[0] + 6) + ")").call(x_axis);
	          svg.select("#y_axis").attr("transform", "translate(" + (axis.x.range()[0]) + ", 0)").call(y_axis);
	          svg.select("defs #graphs_clip_path rect").attr("x", axis.x.range()[0]).attr("y", 0).attr("width", axis.x.range()[1] - axis.x.range()[0]).attr("height", height);
	          svg.selectAll("#playground_bg, #playground").attr("x", axis.x.range()[0]).attr("y", axis.y.range()[1]).attr("width", axis.x.range()[1] - axis.x.range()[0]).attr("height", axis.y.range()[0] - axis.y.range()[1]);
	          svg.select("#playground").attr("width", axis.x.range()[1] - axis.x.range()[0] + 20);
	          svg.selectAll("#tags #lines g").call(redraw_existing_lines);
	          svg.selectAll("#tags #labels g").call(redraw_existing_labels);
	          margin = 10;
	          playground_width = axis.x.range()[1] - axis.x.range()[0];
	          w = (playground_width - 5 * margin) / 6;
	          year_zoomers = d3.select("#year_zoomers").attr("transform", "translate(" + (axis.x.range()[0]) + " " + (axis.y.range()[0] + 34) + ")").selectAll("* > g").attr("transform", function(d, i) {
	            return "translate(" + (i * (w + margin)) + " 0)";
	          });
	          year_zoomers.select("text").attr("x", w / 2);
	          return year_zoomers.select("rect").attr("width", w);
	      }

			
	        function add_remove(msg, tag_data) {
	            var sel;
	            sel = tags_lis.filter(function(d) {
	              return d === tag_data;
	            });
	            if (msg === "add") {
	                tags_selection.add(tag_data);
		            sel.style("background-color", tag_color_scale(tag_data.code)).classed("selected", true);	              
	            } else {
					tags_selection.remove(tag_data);
					sel.style("background-color", "").classed("selected", false);
	            }
                update_lines();
	          };
			
          function update_class_for_tag(years) {
	          var max_tag = 10;
	          return function(sel) {
	            return sel.each(function(dataTag) {
		          var t = d3.select(this);
		          /*  
	              var font_size, i, level, line_height, tag_data_max, sizes, _ref;
	              tag_data_max = this.__data__.nb;
	              i = tag_data_max / max_tag;
	              console.log('level = '+i+" = "+tag_data_max+" / "+max_tag);
	              level = i > 1 ? 4 : i > 0.8 ? 3 : i > 0.5 ? 2 : i > 0.3 ? 1 : 0;
	              sizes = [[0.9, 1], [1.2, 0.7], [1.7, 0.625], [2.0, 0.55], [2.5, 0.47]];
	              _ref = sizes[level], font_size = _ref[0], line_height = _ref[1];
	              return d3.select(this).style("line-height", line_height).style("font-size", font_size * 14 + "px");
	              */
	              return d3.select(this).style("line-height", 0.9).style("font-size", fontSize(this.__data__.nb) + "px");
	            });
	          };
	        };

	      function max_for_tags(tags_data, years_array) {
	            if (years_array == null) {
	              years_array = years;
	            }
	            return d3.max(tags_data, function(data) {
	              var count, i;
	              return d3.max((function() {
	                var _j, _len, _ref, _ref1, _results1;
	                _ref = data.temps;
	                _results1 = [];
	                for (i = _j = 0, _len = _ref.length; _j < _len; i = ++_j) {
	                  count = _ref[i];
	                  _ref1 = parseInt(years[i].temps);
	                  var idx = __indexOf.call(years_array, _ref1)
	                  if (idx >= 0) {
	                    _results1.push(count);
	                  }
	                }
	                return _results1;
	              })());
	            }) || 0;
	        };
	        
			transform_for_tag_label = function(labels_selection, translate_y_to_zero) {
	                if (translate_y_to_zero == null) {
	                  translate_y_to_zero = false;
	                }
	                return labels_selection.attr("transform", function(tag_data) {
	                  var count, i, max_count, max_year, pt, year_range, _i, _j, _len, _ref, _ref1, _ref2, _results;
	                  year_range = (function() {
	                    _results = [];
	                    for (var _i = _ref = axis.x.domain()[0], _ref1 = axis.x.domain()[1]; _ref <= _ref1 ? _i <= _ref1 : _i >= _ref1; _ref <= _ref1 ? _i++ : _i--){ _results.push(_i); }
	                    return _results;
	                  }).apply(this);
	                  max_count = 0;
	                  max_year = year_range[0];
	                  _ref2 = tag_data.years;
	                  for (i = _j = 0, _len = _ref2.length; _j < _len; i = ++_j) {
	                    count = _ref2[i];
	                    year = parseInt(years[i]);
	                    if (__indexOf.call(year_range, year) < 0) {
	                      continue;
	                    }
	                    if (count > max_count) {
	                      max_count = count;
	                      max_year = year;
	                    }
	                  }
	                  pt = [axis.x(max_year) + 5, axis.y(max_count) - 15];
	                  if (translate_y_to_zero) {
	                    pt[1] = axis.y.range()[0];
	                  }
	                  return "translate(" + pt[0] + " " + pt[1] + ")";
	                });
	              };

	  		redraw_existing_lines = function(lines) {
                return lines.style("clip-path", "url(#graphs_clip_path)").select("g path").attr("d", function(tag_data) {
                  return line_generator(tag_data.temps);
                });
              };

			redraw_existing_labels = function(labels) {
	                return labels.call(transform_for_tag_label);
	        };
	                    
	  	    year_zoomers = d3.select("#year_zoomers").selectAll("g").data((function() {
                var i, ticks;
                ticks = [1990, 2000, 2010, 2020];
                return ticks = ((function() {
                  var _i, _len, _results;
                  _results = [];
                  for (i = _i = 0, _len = ticks.length; _i < _len; i = ++_i) {
                    year = ticks[i];
                    if (ticks[i + 1]) {
                      _results.push([year, ticks[i + 1]]);
                    } else {
                      _results.push(void 0);
                    }
                  }
                  return _results;
                })()).filter(function(r) {
                  return r != null;
                });
              })()).enter().append("g");
            
	        year_zoomers.on("click", function(range) {
	                var g, l, that;
	                g = d3.select(this);
	                g.classed("selected", !g.classed("selected"));
	                that = this;
	                year_zoomers.filter(function() {
	                  return this !== that;
	                }).classed("selected", false);
	                l = years.length;
	                if (g.classed("selected")) {
	                  range = [Math.max(years[0], range[0] - 1), Math.min(years[l - 1], range[1] + 1)];
	                } else {
	                  range = [years[0], years[l - 1]];
	                }
	                return year_range_update(range);
	        });

	        function year_range_update(range) {
	            var _i, _ref, _ref1, _results;
	            axis.x.domain(range);
	            svg.select("#x_axis").transition().duration(duration).call(x_axis);
	            update_y_axis(max_for_tags(tags_selection, (function() {
	              _results = [];
	              for (var _i = _ref = axis.x.domain()[0], _ref1 = axis.x.domain()[1]; _ref <= _ref1 ? _i <= _ref1 : _i >= _ref1; _ref <= _ref1 ? _i++ : _i--){ _results.push(_i); }
	              return _results;
	            }).apply(this)));
	            svg.selectAll("#tags #lines g").transition().duration(duration).call(redraw_existing_lines);
	            return svg.selectAll("#tags #labels g").transition().duration(duration).call(redraw_existing_labels);
	          }
	        
			h = 32;
	        year_zoomers.append("rect").attr("x", 0).attr("y", 0).attr("height", h);
	        year_zoomers.append("text").attr("y", h / 2 + 2).call(function(t) {
	                t.append("tspan").text("années ");
	                return t.append("tspan").classed("year", true).text(function(range) {
	                  return range[0];
	                });
	              });
            
			update_y_axis = function(max) {
	                max = Math.max(max, minMax);
	                axis.y.domain([0, max]);
	                svg.select("#y_axis").transition().duration(duration).call(y_axis);
	                //return PubSub.publishSync("axis:y:update");
	              };
	        
			update_lines = function() {
	                var bbox, clip_path_id, disappear, el, initial_line, labels, left_to_right_appear_transition, lines, margin, new_labels, new_lines, new_max, transform, x_pos, _i, _ref, _ref1, _results;
	                new_max = max_for_tags(tags_selection, (function() {
	                  _results = [];
	                  for (var _i = _ref = axis.x.domain()[0], _ref1 = axis.x.domain()[1]; _ref <= _ref1 ? _i <= _ref1 : _i >= _ref1; _ref <= _ref1 ? _i++ : _i--){
		                   _results.push(_i); 
		                   }
	                  return _results;
	                }).apply(this));
	                
	                update_y_axis(new_max);
	                initial_line = line_generator((function() {
	                  var _j, _len, _ref2, _results1;
	                  _ref2 = years;
	                  _results1 = [];
	                  for (_j = 0, _len = _ref2.length; _j < _len; _j++) {
	                    year = parseInt(_ref2[_j].temps);
	                    _results1.push(0);
	                  }
	                  return _results1;
	                })());
	                lines = svg.select("#tags #lines").selectAll("g").data(tags_selection, function(d) {
	                  return d.tag_id;
	                });
	                
		        new_lines = lines.enter().append("g").attr("opacity", 1).classed("line", true);

                margin = {
                  vertical: 2,
                  horizontal: 10
                };
                x_pos = axis.x.range()[0] + 25;
                if (false && (el = _.last((d3.selectAll("g.label")[0])))) {
                  bbox = el.getBBox();
                  transform = d3.transform(d3.select(el).attr("transform"));
                  x_pos = transform.translate[0] + bbox.width + margin.horizontal;
                }
                lines.transition().duration(duration).call(redraw_existing_lines);
                clip_path_id = function(tag_data, i) {
                  return "clip_path_tag_" + i;
                };
                
	            new_lines.append("clipPath").attr("class", "clippath").attr("id", clip_path_id).append("rect").attr("x", axis.x.range()[0]).attr("width", 0).attr("y", axis.y.range()[1] - 10).attr("height", axis.y.range()[0] - axis.y.range()[1] + 20);
	            new_lines.append("path").attr("stroke", function(d) {
                    return tag_color_scale(d.code);
              		}).style("clip-path", function(tag_data, i) {
	                  return "url(#" + (clip_path_id(tag_data, i)) + ")";
	                }).attr("d", function(tag_data) {
	                  return line_generator(tag_data.temps);
	                });
                
	            left_to_right_appear_transition = new_lines.transition().duration(duration).ease("linear");
	            left_to_right_appear_transition.select(".clippath").remove().select("rect").attr("width", axis.x.range()[1] - axis.x.range()[0]);
	            left_to_right_appear_transition.select("path").each('end', function() {
	                  return d3.select(this).style("clip-path", "url(#graphs_clip_path)");
	                });
	            labels = svg.select("#tags #labels").selectAll("g").data(tags_selection, function(d) {
	                  return d.tag_id;
	                });
	            labels.transition().duration(duration).call(redraw_existing_labels);
	                new_labels = labels.enter().append("g").attr("opacity", 1).on('click', function(tag_data) {
	                  return add_remove("remove", tag_data);
	                }).style('cursor', 'pointer').each(function(tag_data, data_index) {
	                  var g, padding, rect, text;
	                  g = d3.select(this);
	                  g.call(transform_for_tag_label);
	                  padding = {
	                    top: 6,
	                    bottom: 3,
	                    horizontal: 10
	                  };
	                  rect = g.append("rect");
	                  text = g.append("text").text(function(d) {
	                    return d.code;
	                  }).attr("x", padding.horizontal).attr("y", 0);
	                  bbox = text.node().getBBox();
	                  x_pos += bbox.width + padding.horizontal * 2 + margin.horizontal;
	                  return rect.attr("fill", function(d) {
	                    return tag_color_scale(d.code);
	                  	}).attr("x", bbox.x + bbox.width / 2).attr("y", bbox.y + bbox.height / 2).transition().duration(duration).attr("x", bbox.x - padding.horizontal).attr("y", bbox.y - padding.top).attr("width", bbox.width + padding.horizontal * 2).attr("height", bbox.height + padding.bottom + padding.top);
	                });
	                
	          function disappear(sel) {
	                  return sel.exit().transition().ease('exp-out').duration(duration).attr("opacity", 0).remove();
	                };
	                disappear(lines).select("g.line path").attr("d", initial_line);
	                disappear(labels).call(transform_for_tag_label, true);
	                //return popup.update();
	              };

              transform_for_tag_label = function(labels_selection, translate_y_to_zero) {
                  if (translate_y_to_zero == null) {
                    translate_y_to_zero = false;
                  }
                  return labels_selection.attr("transform", function(tag_data) {
                    var count, i, max_count, max_year, pt, year_range, _i, _j, _len, _ref, _ref1, _ref2, _results;
                    year_range = (function() {
                      _results = [];
                      for (var _i = _ref = axis.x.domain()[0], _ref1 = axis.x.domain()[1]; _ref <= _ref1 ? _i <= _ref1 : _i >= _ref1; _ref <= _ref1 ? _i++ : _i--){ _results.push(_i); }
                      return _results;
                    }).apply(this);
                    max_count = 0;
                    max_year = year_range[0];
                    _ref2 = tag_data.temps;
                    for (i = _j = 0, _len = _ref2.length; _j < _len; i = ++_j) {
                      count = _ref2[i];
                      year = parseInt(years[i].temps);
                      if (__indexOf.call(year_range, year) < 0) {
                        continue;
                      }
                      if (count > max_count) {
                        max_count = count;
                        max_year = year;
                      }
                    }
                    pt = [axis.x(max_year) + 5, axis.y(max_count) - 15];
                    if (translate_y_to_zero) {
                      pt[1] = axis.y.range()[0];
                    }
                    return "translate(" + pt[0] + " " + pt[1] + ")";
                  });
                };
	              
		</script>
	</body>
</html>